<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>优惠券</title>
	<style>
		.stamp {
			width: 387px;
			height: 140px;
			padding: 0 10px;
			position: relative;
			overflow: hidden;
			font-family: 'microsoft yahei';
		}
		.stamp:before {
			content: '';
			position: absolute;
			top:0;
			bottom:0;
			left:10px;
			right:10px;
			z-index: -1;
		}
		.stamp:after {
			content: '';
			position: absolute;
			left: 10px;
			top: 10px;
			right: 10px;
			bottom: 10px;
			z-index: -2;
		}
		.stamp i{/*背景非纯色效果 */
			position: absolute;
			left: 20%;
			top: 45px;
			height: 190px;
			width: 390px;
			background-color: rgba(255,255,255,.15);
			transform: rotate(-30deg); 
		}
		.stamp .par {
			float: left;
			padding: 16px 15px;
			width: 220px;
			border-right:2px dashed rgba(255,255,255,.3);
			text-align: left;
		}
		.stamp .par p {
			color:#fff;
		/* text-align: center; */
		}
		.stamp .par span{
			font-size: 30px;
			color:#fff;
			margin-right: 5px;
		}
		.stamp .par .sign{
			font-size: 34px;
		}
		.stamp .par sub{
			position: relative;
			top:-5px;
			color:rgba(255,255,255,.8);
		}
		.stamp .par .text-ct {
			position: relative;
			left: 20px;
			top:-20px;
		}
		.stamp .copy{
			display: inline-block;
			padding:21px 14px;
			width:100px;
			vertical-align: text-bottom;
			font-size: 30px;
			color:rgb(255,255,255);
			text-align:center;
		}
		.stamp .copy p{
			width: 100px;
			font-size: 16px;
			margin-top: 15px;
		}
		.stamp01{
			background: #F39B00;
			background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px);
			background-size: 15px 15px;
			background-position: 9px 3px; 
		}
		.stamp01:before{
			background-color:#F39B00;
		}
	</style>
</head>
<body>
	<div class="stamp stamp01">
	  <div class="par">
	    <p>XXXXXX折扣店</p>
	    <sub class="sign">￥</sub>
	    <span>50.00</span>
	    <sub>优惠券</sub>
	    <p class="text-ct">订单满100.00元</p>
	  </div>
	  <div class="copy">
	    副券
	    <p>
	       2015-08-13<br>
	       2016-08-13
	    </p>
	  </div>
  	<i></i>
	</div>
</body>
</html>